<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-15 14:28:48
-->
<template>
  <van-action-sheet v-model:show="show" title="商品">
    <div class="content">
      <div class="item" v-for="item in list" :key="item.goodsId">
        <div class="left">
          <van-image width="120" height="70" radius="5" :src="item.data.coverUrl" />
        </div>
        <div class="right">
          <div class="title">{{ item.data.title }}</div>
          <div class="footer">
            <span class="price">{{
              item.data.price > 0 ? item.data.price + "金石" : "免费"
            }}</span>
            <span class="vipPrice">
              <i class="iconfont icon-VIP"></i>
              <span>{{
                item.data.vipPrice > 0 ? item.data.vipPrice + "金石" : "免费"
              }}</span>
            </span>
          </div>
          <van-button
            type="danger"
            round
            size="mini"
            v-if="item.data.isPayed === 0"
            @click="handleBuyGoods(item)"
            >购买</van-button
          >
          <van-button
            type="danger"
            plain
            round
            size="mini"
            v-if="item.data.isPayed === 1"
            >已购</van-button
          >
        </div>
      </div>
    </div>
  </van-action-sheet>

  <div class="good_icon" v-if="first && first.nums > 0 && first.first">
    <div class="goods_top" v-show="showTop">
      <img :src="first.first.data.coverUrl" alt="" srcset="" />
      <!-- <div class="right">
        <div class="title">{{ first.first.data.title }}</div>
        <div style="font-size: 12px">
          {{ first.first.data.price }}金石
          <span style="color: red"
            >VIP {{ first.first.data.vipPrice }}金石</span
          >
        </div>
      </div> -->
      <div class="triangleDiv"></div>
      <van-icon name="close" class="close" @click="showTop = false" />
    </div>
    <van-icon name="bag-o" size="50" @click="show = true" />
  </div>

  <buySend ref="buySend" @confirm="handleBuyGoodsConfirm" />
</template>



<script>
import { defineComponent, onMounted, ref, watch } from "vue";
import {
  liveGoodTop,
  liveGoodsList,
  buyLiveGoods,
  getSendGoodsList,
} from "@/api/live";
import { useRoute } from "vue-router";
import { Toast } from "vant";
import buySend from "@/components/buySend.vue";
export default defineComponent({
  components: {
    buySend,
  },
  emits:['handleLiveGoodsBuySucc'],
  setup(props,{emit}) {
    const show = ref(false);
    const route = useRoute();

    const buySend = ref();

    const first = ref({});
    onMounted(async () => {
      const res = await liveGoodTop({
        liveId: route.query.liveId,
      });
      if (typeof res === "object") {
        first.value = res;
      }
    });

    const list = ref([]);
    watch(
      () => show.value,
      async (v) => {
        if (v) {
          const res = await liveGoodsList({ liveId: route.query.liveId });
          list.value = res;
        }
      }
    );
    const handleBuyGoods = async (item) => {
      // 获取商品是否有赠送
      const res = await getSendGoodsList({
        subjectId: item.data.goodsId,
        pageIndex: 1,
        pageSize: 10,
      });
      console.log(res, "xx");
      if (typeof res !== "number") {
        if (res && res.length) {
          // 唤起赠送商品弹窗
          buySend.value.list = res;
          buySend.value.params = item;
          buySend.value.show = true;
        } else {
          // 直接购买
          const result = await buyLiveGoods({
            subjectId: item.data.goodsId,
            type: 1,
            fromId: route.query.liveId,
          });
          if (typeof result !== "number") {
            show.value = false;
            Toast.success("购买成功！");
          }
        }
      }
    };

    const handleBuyGoodsConfirm = async (item) => {
      const result = await buyLiveGoods({
        subjectId: item.data.goodsId,
        type: 1,
        fromId: route.query.liveId,
      });
      if (typeof result !== "number") {
        show.value = false;
        Toast.success("购买成功！");
        emit('handleLiveGoodsBuySucc',item)
      }
    };
    return {
      show,
      first,
      list,
      buySend,
      handleBuyGoods,
      handleBuyGoodsConfirm,
      showTop: ref(!false),
    };
  },
});
</script>



<style lang="scss" scoped>
.content {
  min-height: 200px;
}
.good_icon {
  position: fixed;
  right: 0;
  bottom: 60px;
  color: #f76815;
  animation: mymove 5s infinite;
  -webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
  animation-direction: alternate; /*轮流反向播放动画。*/
  animation-timing-function: ease-in-out; /*动画的速度曲线*/
  /* Safari 和 Chrome */
  -webkit-animation: mymove 5s infinite;
  -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
  -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
  i {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .goods_top {
    position: absolute;
    width: 100px;
    right: 10px;
    height: 60px;
    bottom: 60px;
    border-radius: 5px;
    background: #ffffff;
    display: flex;
    font-size: 14px;
    display: flex;
    img {
      width: 100px;
      height: 50px;
      margin: 5px;
      border-radius: 5px;
    }
    .right {
      text-align: left;
      width: 120px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      color: #000;
      .title {
        margin-bottom: 15px;
        padding-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .triangleDiv {
    border-color: #ffffff rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
      rgba(255, 255, 255, 0);
    border-style: solid;
    border-width: 10px 10px 0 10px;
    height: 0;
    width: 0;
    position: absolute;
    right: 5px;
    bottom: -6px;
  }
  .close {
    position: absolute;
    top: -18px;
    right: -10px;
    color: red;
    font-size: 26px;
  }
}

.content {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  margin-bottom: 10px;
  .item {
    height: 80px;
    overflow: hidden;
    display: flex;
    .left {
      overflow: hidden;
      width: 120px;
    }
    .right {
      padding: 0px;
      position: relative;
      width: calc(100% - 120px);
      button {
        position: absolute;
        right: 0;
        bottom: 35%;
        padding: 0 10px;
        font-size: 6px;
      }
      .title {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .footer {
        margin-top: 18px;
        display: flex;
        span {
          font-size: 12px;
          margin-right:2px;
          display: flex;
        }
        .price {
          color: #999;
        }
        .vipPrice {
          i {
            font-size: 24px;
            position: relative;
            top: -5px;
          }
          color: red;
        }
      }
    }
  }
}

@keyframes mymove {
  0% {
    transform: scale(1); /*开始为原始大小*/
  }
  25% {
    transform: scale(1.1); /*放大1.1倍*/
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}
</style>